<template>
  <div class="p-[20px] bg-white">
    <vxe-form ref="formRef" v-bind="formOptions" v-on="formEvents" />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import {
  VxeUI,
  VxeFormProps,
  VxeFormListeners,
  VxeFormItemPropTypes,
  VxeUploadPropTypes,
} from "vxe-pc-ui";
import StoreAPI, { StoreCategoryVO, StoreVO } from "@/api/store";

const categoryOptions = ref<StoreCategoryVO[]>([]);

const route = useRoute();

onMounted(() => {
  if (route.query.id) {
    StoreAPI.getDetail(route.query.id as string).then((res) => {
      formOptions.data = res;
    });
  }
  StoreAPI.getCategoryOptions().then((res) => {
    categoryOptions.value = res;
    const categoryItem = formOptions.items?.find(
      (item) => item.field === "cid"
    );
    if (categoryItem?.itemRender) {
      categoryItem.itemRender.options = res.map((t) => ({
        label: t.name,
        value: t.id,
      }));
    }
  });
});

const uploadMethod: VxeUploadPropTypes.UploadMethod = ({ file }) => {
  const formData = new FormData();
  formData.append("file", file);
  return StoreAPI.uploadFile(formData);
};

const uploadItemRender = reactive<VxeFormItemPropTypes.ItemRender>({
  name: "VxeImageUpload",
  props: {
    mode: "image",
    uploadMethod,
  },
});

const formOptions = reactive<VxeFormProps<StoreVO>>({
  titleColon: true,
  titleWidth: 200,
  titleAlign: "right",
  className: "vxe-form-fixed",
  data: {
    name: "",
    companyName: "",
    cid: "",
    logo: "",
    //省份id
    provinceId: "",
    //市id
    cityId: "",
    //区id
    districtId: "",
    //街道id
    streetId: "",
    address: "",
    managerName: "",
    managerTel: "",
    idNumber: "",
    idFrontPic: "",
    idBackPic: "",
    licenseNumber: "",
    licensePicture: "",
    shopFrontPicture: "",
    tradeMarkLicense: "",
  },
  rules: {
    name: [{ required: true, message: "请输入名称" }],
    companyName: [{ required: true, message: "请输入公司名称" }],
    cid: [{ required: true, message: "请选择商家分类" }],
    logo: [{ required: true, message: "请上传商家logo" }],
    provinceId: [{ required: true, message: "请选择公司地址" }],
    address: [{ required: true, message: "请输入详细地址" }],
    licenseNumber: [{ required: true, message: "请输入营业执照编码" }],
    licensePicture: [{ required: true, message: "请上传营业执照" }],
    idFrontPic: [{ required: true, message: "请上传身份证正面照" }],
    idBackPic: [{ required: true, message: "请上传身份证反面照" }],
    managerName: [{ required: true, message: "请输入联系人" }],
    managerTel: [{ required: true, message: "请输入联系电话" }],
  },
  items: [
    {
      field: "name",
      title: "商家名称",
      span: 24,
      itemRender: { name: "ElInput", props: { placeholder: "请输入" } },
    },
    {
      field: "companyName",
      title: "公司名称",
      span: 24,
      itemRender: { name: "ElInput", props: { placeholder: "请输入" } },
    },
    {
      field: "cid",
      title: "商家分类",
      span: 24,
      itemRender: {
        name: "ElSelect",
        options: [],
      },
    },
    {
      field: "logo",
      title: "商家logo",
      span: 24,
      itemRender: {
        name: "VxeImageUpload",
        props: {
          limit: 1,
        },
      },
    },
    {
      field: "provinceId",
      title: "公司地址",
      span: 24,
      itemRender: { name: "VxeAreaSelect" },
    },
    {
      field: "address",
      title: "详细地址",
      span: 24,
      itemRender: { name: "ElInput", props: { placeholder: "请输入" } },
    },
    {
      field: "licenseNumber",
      title: "营业执照编码",
      span: 24,
      itemRender: { name: "ElInput", props: { placeholder: "请输入" } },
    },
    {
      field: "licensePicture",
      title: "营业执照图片",
      span: 24,
      itemRender: {
        name: "VxeImageUpload",
        props: {
          limit: 1,
        },
      },
    },
    {
      field: "shopFrontPicture",
      title: "门头照",
      span: 24,
      itemRender: {
        name: "VxeImageUpload",
        attrs: {
          tips: [
            "1. 请上传至少2张不同连锁店的门头图，门头需包含连锁名称，以证明连锁名称实际存在",
            "2. 请保证门头图清晰可见，门头招牌无遮挡",
            "3. 图片支持PNG、JPG和JPEG格式，大小不超过5MB",
          ],
        },
      },
    },
    {
      field: "tradeMarkLicense",
      title: "商标注册证",
      span: 24,
      itemRender: {
        name: "VxeImageUpload",
        props: {
          limit: 1,
        },
        attrs: { tips: "1. 商标注册证原件或加盖商标注册方公章的复印！" },
      },
    },
    {
      field: "managerName",
      title: "联系人姓名",
      span: 24,
      itemRender: { name: "ElInput", props: { placeholder: "请输入" } },
    },
    {
      field: "managerTel",
      title: "联系人电话",
      span: 24,
      itemRender: { name: "ElInput", props: { placeholder: "请输入" } },
    },
    {
      field: "idNumber",
      title: "联系人身份证号",
      span: 24,
      itemRender: { name: "ElInput", props: { placeholder: "请输入" } },
    },
    {
      field: "idFrontPic",
      title: "联系人身份证个人面",
      span: 24,
      itemRender: { name: "VxeImageUpload", props: { limit: 1 } },
    },
    {
      field: "idBackPic",
      title: "联系人身份证国徽面",
      span: 24,
      itemRender: { name: "VxeImageUpload", props: { limit: 1 } },
    },
    {
      align: "center",
      span: 24,
      itemRender: {
        name: "VxeButtonGroup",
        options: [
          { type: "submit", content: "提交", status: "primary" },
          { type: "reset", content: "重置" },
        ],
      },
    },
  ],
});

const formEvents: VxeFormListeners<StoreVO> = {
  submit({ data }) {
    const { id, ...rest } = data;
    if (id) {
      StoreAPI.update(id, rest).then((res) => {
        ElMessage.success("修改成功");
      });
    } else {
      StoreAPI.add(data).then((res) => {
        ElMessage.success("添加成功");
      });
    }
  },
  reset() {
    VxeUI.modal.message({ content: "重置事件", status: "info" });
  },
};
</script>
